<template>
  <div>
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <!-- <div class="container-fluid"> -->
        <div class="container">
        <!-- <div class="row mb-2">
          
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-left">
              <li class="breadcrumb-item"><a href="#">小工具</a></li>
              <li class="breadcrumb-item active">请求生成</li>
            </ol>
          </div>
          <div class="col-sm-6">
              <h3 class="m-0">请求生成</h3>
            </div> 
        </div> -->
  
      </div>
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <div class="content">
      <div class="container">


        <div class="row">

          <div class="col-lg-8">
            <form>
              <div class="form-group">
                <label for="paramsTextarea">post请求参数</label>
                <textarea class="form-control" id="paramsTextarea" rows="8" v-model="paramsText" @blur="handleInputBlur" 
                placeholder="amount=[288]&payTime=[2023-06-07 14:05:08]&out_pay_id=[7072200175976992251]&partnerAgreementId=[20205320623099867114]&partnerPayId=[2023060722001441021402222089]&result=[success]&notify_type=[pay]&notifyType=[pay]&partner_pay_id=[2023060722001441021402222089]&outPayId=[7072200175976992251]&partner_agreement_id=[20205320623099867114]&pay_channel=[weixin]&payChannel=[weixin]&payId=[7072090934759993333]&pay_id=[7072090934759993333]"
                ></textarea>
              </div>

              <div class="form-group">
                <label for="inputEmail4">请求地址</label>
                <input type="text" class="form-control" name="reqUrl" id="reqUrl" v-model="formParam.reqUrl" @blur="handleInputBlur">
              </div>
              

              <div class="form-group">
                  <label for="curlResTextarea">curl 结果</label>
                  <textarea class="form-control" id="curlResTextarea" rows="8" placeholder="{}" v-model="curlVal"></textarea>
              </div>
            </form>
          </div>

        </div>
        <!-- /.row -->
      </div><!-- /.container-fluid -->


    </div>
    <!-- /.content -->
  </div>
</template>
<script>

// import axios from 'axios';
// import qs from 'qs';
import {post} from '@/utils/api'

export default {

  name: "gen-req",
  data() {
    return {
      // val: '',
      curlVal: '',
      paramsText: '',
      formParam: {
        reqUrl: '',
        postParams: ''
      }

      // base62EndecodeVal: '',
      // urlEndecodeVal: '',
      // shardingId: '',
      // dbTable: ''
    };
  },
  methods: {

    handleInputBlur() {
      //console.log('oo')
      if (this.paramsText && this.formParam.reqUrl) {
        this.formParam.postParams = encodeURIComponent(this.paramsText)
        this.genPostReq();
      }
    },

    async genPostReq() {
      var reqParam = {req_url:'', post_params:''}
      reqParam.req_url = this.formParam.reqUrl;
      reqParam.post_params = this.formParam.postParams;
      var url = '/tool/gen_post_curl';

      try {
        // 发送 application/json 类型的 POST 请求
        var retData = await post(url, reqParam, 'form');
        this.curlVal = retData.data
        // 发送 application/x-www-form-urlencoded 类型的 POST 请求 (取消注释以使用)
        // this.result = await post(url, data, 'form');
      } catch (error) {
        console.error('请求失败:', error);
      }
      
    },
  }
};

// this.$global.constants.API_ORIGIN  可以引用全局常量
</script>

<style scoped></style>
